<template>
    <div class="Card2_body" :style="{
        width:props.width
    }">
        <div>
            <el-image style="width:100%" :src="props.url" />
        </div>
        <div class="title">
            {{ props.title }}
        </div>

        <div class="tag">
            <div>
                <el-button round color="#EEEEEE" v-for="(item,index) in props.tags" :key="index">{{ item }}</el-button>
            </div>
            <div>
                <div>
                    {{ props.collection }}
                </div>
                <div>
                    <el-image style="width:20px"
                        src="https://www.showjane.com/template/pc/rainbow/static/xiujiang/images/inspiration/ico_collect.png" />
                </div>
            </div>
        </div>
    </div>
</template>


<script setup>
const props = defineProps({
    width:String,
    url: String,
    title: String,
    tags: Array,
    collection: Number,
})

</script>


<style scoped lang="scss">
.Card2_body{
    font-size: 14px;
    & .title{
        font-weight: bold;
        margin: 15px 0px;
    }
    & .tag{
        display: flex;
        justify-content: space-between;
        & :deep(.el-button:hover){
            color: #54BAC9;
        }
        &>:nth-child(1){
        }
        & >:nth-child(2){
            width: 80px;
            display: flex;
            justify-content: space-between;
        }
    }
}
</style>
